<template>
  <div class="main">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
      class="demo-ruleForm"
      size="mini"
    >

      <el-row>
        <el-col :span="11">
          <el-form-item label="机构" prop="deptId">
            <el-select
              v-model="ruleForm.deptId"
              :disabled="ifSchoolId"
              @change="gradeList(ruleForm.deptId)"
              placeholder="请选择机构"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in schoolList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入家庭住址" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号" prop="jobNo">
            <el-input v-model="ruleForm.jobNo" placeholder="请输入学号" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="年级" prop="glassId">
            <el-select
              clearable
              v-model="ruleForm.glassId"
              @change="classList(ruleForm.glassId)"
              placeholder="请选择年级"
              size="mini"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in gradeData"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="classId">
            <el-select clearable v-model="ruleForm.classId" placeholder="请选择班级" size="mini">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in classData"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-row>
        <el-col :span="11">
          <el-form-item label="身份证号" prop="idNo">
            <el-input v-model="ruleForm.idNo" placeholder="请输入身份证号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="手机号码" prop="emergencyPhone">
            <el-input v-model="ruleForm.emergencyPhone" placeholder="请输入紧急联系人电话" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="工号" prop="jobNo">
            <el-input v-model="ruleForm.jobNo" placeholder="请输入工号" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="民族" prop="nation">
            <el-select filterable v-model="ruleForm.nation" placeholder="请选择民族" clearable>
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in ethnicList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="ruleForm.birthday" type="date" clearable placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="婚否" prop="marriedFlg">
            <el-radio-group v-model="ruleForm.marriedFlg">
              <el-radio label="已婚" value="1"></el-radio>
              <el-radio label="未婚" value="2"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业院校" prop="graduateFrom">
            <el-input v-model="ruleForm.graduateFrom" placeholder="请输入毕业院校" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="专业" prop="specialty">
            <el-input v-model="ruleForm.specialty" placeholder="请输入专业" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位" prop="degree">
            <el-select v-model="ruleForm.degree" placeholder="请选择学位" clearable>
              <el-option label="学士" value="学士"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="入职时间" prop="hiredate">
            <el-date-picker v-model="ruleForm.hiredate" type="date" clearable placeholder="选择入职时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业时间" prop="graduateTime">
            <el-date-picker
              v-model="ruleForm.graduateTime"
              type="date"
              clearable
              placeholder="选择毕业时间"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="工龄" prop="employedYears">
            <el-input v-model="ruleForm.employedYears" placeholder="请输入工龄" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职称" prop="level">
            <el-select v-model="ruleForm.level" placeholder="请选择职称" clearable>
              <el-option label="正高级" value="0"></el-option>
              <el-option label="高级" value="1"></el-option>
              <el-option label="一级" value="2"></el-option>
              <el-option label="二级" value="3"></el-option>
              <el-option label="三级" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择状态" clearable>
              <el-option label="实习" value="2"></el-option>
              <el-option label="转正" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务" prop="duty">
            <el-select v-model="ruleForm.duty" placeholder="请选择状态" clearable>
              <el-option label="班主任" value="班主任"></el-option>
              <el-option label="教导处主任" value="教导处主任"></el-option>
              <el-option label="教师" value="教师"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="任教科目" prop="course">
            <el-input v-model="ruleForm.course" placeholder="请输入任教科目" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input v-model="ruleForm.emergencyContact" placeholder="请输入紧急联系人" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="nativePlace">
            <el-input v-model="ruleForm.nativePlace" placeholder="请输入籍贯" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-col :span="24">
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">{{$t("action.reset")}}</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">{{$t("action.save")}}</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
  import Cookies from "js-cookie";
  import ethnic from "@/assets/json/ethnic.js";
  import {format} from "@/utils/datetime";

  export default {
    name: "edit",
    props: {
      msg: ""
    },
    data() {
      return {
        url: this.$Config.url,
        ifSchoolId: false,
        ethnicList: [], //名族列表
        schoolList: [], //机构列表
        gradeData: [], //年级列表
        classData: [], //班级列表
        ruleForm: {
          name: "", //姓名
          birthday: "", //出生年月
          course: "", //任教科目
          degree: "", //学位
          deptId: "", //机构id
          glassId: "", //年级id
          classId: "", //班级id

          jobNo: "", //学号
          idNo: "", //身份证号
          gender: "", //性别
          level: "", //职称
          nation: "", //名族
          marriedFlg: "", //婚否
          school: "", //学校
          graduateFrom: "", //毕业院校
          specialty: "", //专业
          grade: "", //年级
          employedYears: "", //工龄
          authorized: "", //编制
          classBan: "", //班级
          hiredate: "", //入学时间
          graduateTime: "", //毕业时间
          cardType: "", //卡类型
          duty: "", //职务
          phone: "", //联系电话

          familyPhone: "", //家庭电话
          emergencyContact: "", //紧急联系人
          emergencyPhone: "", //紧急联系人电话
          emergencyContactRelation: "", //紧急联系人关系
          nativePlace: "", //籍贯
          address: "", //家庭住址
          ifInSchool: "", //是否住校
          status: "", //状态
          apartment: "" //公寓宿舍
        },
        rules: {
          name: [
            {required: true, message: "请输入姓名", trigger: "blur"},
            {min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur"}
          ],
          jobNo: [
            {required: true, message: "请输入工号", trigger: "blur"},
            {max: 64, message: "长度不能超过64个字符", trigger: "blur"}
          ],
          glassId: [{required: true, message: "请选择年级", trigger: "change"}],
          classId: [{required: true, message: "请选择班级", trigger: "change"}],
          deptId: [{required: true, message: "请选择机构", trigger: "change"}],
          idNo: [{required: true, message: "请输入身份证号", trigger: "blur"},
            {
              pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
              message: "证件号码格式有误！",
              trigger: "blur"
            }],
          level: [{required: true, message: "请选择职称", trigger: "change"}],
          duty: [{required: true, message: "请选择职务", trigger: "blur"}],
          apartment: [
            {required: true, message: "请选择公寓宿舍", trigger: "change"}
          ],
          phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
          gender: [{required: true, message: "请选择性别", trigger: "change"}],
          nation: [{required: true, message: "请选择名族", trigger: "change"}],
          marriedFlg: [
            {required: true, message: "请选择婚否", trigger: "change"}
          ],
          school: [{required: true, message: "请选择学校", trigger: "change"}],
          graduateFrom: [
            {required: true, message: "请输入毕业院校", trigger: "change"}
          ],
          specialty: [
            {required: true, message: "请输入专业", trigger: "change"}
          ],
          employedYears: [
            {required: true, message: "请输入工龄", trigger: "blur"}
          ],
          authorized: [
            {required: true, message: "请选择是否在编", trigger: "change"}
          ],
          grade: [{required: true, message: "请选择年级", trigger: "change"}],
          classBan: [
            {required: true, message: "请选择班级", trigger: "change"}
          ],
          hiredate: [
            {required: true, message: "请选择入职时间", trigger: "change"}
          ],
          graduateTime: [
            {required: true, message: "请选择毕业时间", trigger: "change"}
          ],
          cardType: [
            {required: true, message: "请选择卡类型", trigger: "change"}
          ],
          address: [
            {required: true, message: "请输入家庭住址", trigger: "blur"}
          ],
          birthday: [
            {required: true, message: "请选择出生日期", trigger: "change"}
          ],
          course: [
            {required: true, message: "请输入任教科目", trigger: "blur"}
          ],
          degree: [{required: true, message: "请选择学位", trigger: "change"}],
          emergencyPhone: [
            {required: true, message: "请输入紧急联系人电话", trigger: "blur"}
          ],
          nativePlace: [
            {required: true, message: "请输入籍贯", trigger: "blur"}
          ]
        }
      };
    },
    mounted() {
      this.ethnicList = ethnic;
      this.getSchool();
      this.schoolId();
    },
    methods: {
      classList(id) {
        const that = this;
        this.$axios
          .get(that.url + "/admin/class/list", {
            params: {
              gradeId: id
            },
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function (res) {
            if (res.data.code == 200) {
              that.classData = res.data.data;
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      gradeList(id) {
        const that = this;
        this.$axios
          .get(that.url + "/admin/grade/list", {
            params: {
              deptId: id
            },
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function (res) {
            if (res.data.code == 200) {
              that.gradeData = res.data.data;
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      schoolId() {
        try {
          const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId;

          if (deptId == null || deptId == "") {
            this.ifSchoolId = false;
            this.ruleForm.deptId = '';
          } else {
            this.ifSchoolId = true;//不能点击
            this.gradeList(deptId);
          }

          this.ruleForm.deptId = deptId;
        } catch (error) {
        }
      },
      getSchool() {
        const that = this;
        this.$axios
          .get(that.url + "/admin/dept/list", {
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function (res) {
            if (res.data.code == 200) {
              that.schoolList = res.data.data;
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      resetData(id = 1) {
        this.$refs["ruleForm"].resetFields();//先清空
        const that = this;
        const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId;
        this.schoolId();
        if (id) {
          this.id = id;
        }
        this.$axios
          .get(that.url + "/admin/teacher/get/{id}", {
            params: {
              id
            },
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function (res) {
            if (res.status == 200) {
              let data = res.data.data;

              if (data.marriedFlg == true) {
                data.marriedFlg = "已婚";
              } else {
                data.marriedFlg = "未婚";
              }
              if (data.status == 1) {
                data.status = "1";
              } else {
                data.status = "2";
              }
              data.glassId = data.gradeId;
              that.ruleForm = data;
              that.id = data.id;
              that.gradeList(data.deptId);
              that.classList(data.gradeId);
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      submitForm(formName) {
        const that = this;
        this.$refs[formName].validate(valid => {
          if (valid) {
            that.send();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      send() {
        const that = this;
        const data = {
          id: that.msg == 2 ? that.id : "",
          address: that.ruleForm.address, //地址
          classId: 1, //班级id
          birthday: format(this.ruleForm.birthday),
          course: that.ruleForm.course,
          degree: that.ruleForm.degree,
          duty: that.ruleForm.duty,
          emergencyContact: that.ruleForm.emergencyContact,
          emergencyPhone: that.ruleForm.emergencyPhone,
          employedYears: that.ruleForm.employedYears,
          gender: that.ruleForm.gender,
          graduateFrom: that.ruleForm.graduateFrom,
          graduateTime: format(this.ruleForm.graduateTime),
          hiredate: format(this.ruleForm.hiredate),
          idNo: that.ruleForm.idNo,
          jobNo: that.ruleForm.jobNo,
          level: that.ruleForm.level,
          marriedFlg: that.ruleForm.marriedFlg == "已婚" ? true : false,
          name: that.ruleForm.name,
          nation: that.ruleForm.nation,
          nativePlace: that.ruleForm.nativePlace,
          specialty: that.ruleForm.specialty,
          status: that.ruleForm.status,
          deptId: that.ruleForm.deptId, //机构id
          gradeId: that.ruleForm.gradeId,//年级id
          classId: that.ruleForm.classId,//班级id
        };
        this.$axios
          .post(
            that.url + "/admin/teacher/saveOrUpdate",
            that.$qs.stringify(data),
            {
              headers: {
                "x-baie-admin-token": Cookies.get("token")
              }
            }
          )
          .then(function (res) {
            console.log(res);
            if (res.status == 200) {
              if(res.data.code==200){
                if (that.msg == 1) {
                  that.$message({
                    message: "添加成功",
                    type: "success"
                  });
                } else {
                  that.$message({
                    message:"修改成功",
                    type: "success"
                  });
                }
                that.$emit("hideEdit", false);
              }else{
                that.$message({
                  message: res.data.msg,
                  type: "warning"
                });
              }
            } else {
              that.$message({
                message: res.statusText,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.schoolId();
      }
    }
  };
</script>

<style scoped lang="scss">
  .main {
    padding-bottom: 20px;
  }

  .el-select,
  .el-input {
    width: 100%;
  }
</style>
